<template>
	<div>
		<div class="zbian">
			<router-link to="../page/index">
				<img src="./image/fh.png" />
			</router-link>
			<img src="./image/xx.png" />
			<img src="./image/hy.png" />
		</div>
		<div class="liebiao">
			<div class='info' v-for="(index,time) in list" @click="handleSendButton(time)"
				:class="{'guabian': time === id}">
				<div class='avatar'>
					<img :src="require('../../../image/' + index['avatar'])" width="100%" />
				</div>
				<div class='text'>
					<div class='name'>{{index["username"]}}</div>
					<div class='desc'>{{index["lastmessage"]}}</div>
				</div>
			</div>
		</div>
		<div class="ybiang">
			<div class="ltkuan">
				<div class="yhm">
					<p>&nbsp;{{username}}</p>
				</div>
				<div class="jlu" id="jlu">
					<div v-for="(time,index) in history">
						<div class="dmian" v-if="time['senderID']!==helper">
							<img :src="require('../../../image/'+toAvatar)" />
							<div>
								<p>{{time["receiverID"]}}</p>
								<div class="xni">
									<div class="nr">
										<p>{{time["content"]}}
										</p>
									</div>
								</div>

							</div>
							<div class="ychang"></div>
						</div>
						<div class="wd" v-else>
							<img :src="require('../../../image/'+avatar)" />
							<div>
								<div class="xni">
									<div class="nr">
										<p>{{time["content"]}}
										</p>
									</div>
								</div>
							</div>
						</div>
					</div>
					<!-- <div class="dmian bottom-marker"></div> -->
				</div>
			</div>
			<div class="srkuan">
				<textarea v-model="sendMessage"></textarea>
				<button @click="sessionSendButton">发送</button>
			</div>
		</div>
	</div>
</template>

<script>
	import {
		nextTick,
		ref
	} from 'vue';
	import helper from '../page/js/base.js'
	export default {
		name: "Home",
		data() {
			return {
				webSocketObject: null,
				username: "",
				messageList: [

				],
				sendMessage: "",
				you: "",
				list: [],
				pijie: "../../../image/",
				history: [],
				avatar: null,
				toAvatar: null,
				helper: null,
				id: 0
			}
		},
		created() {

			// console.log()
			if (helper.websiteUrl == "") {
				this.$router.replace({
					path: '/login'
				})
			} else {
				this.username = helper.websiteUrl
				this.webSocketInit()
			}
		},
		methods: {
			webSocketInit() {
				const webSocketUrl = 'ws://localhost:8080/myws'
				this.webSocketObject = new WebSocket(webSocketUrl);
				this.webSocketObject.onopen = this.webSocketOnOpen
				this.webSocketObject.onmessage = this.webSocketOnMessage
				this.webSocketObject.onerror = this.webSocketOnError
				this.webSocketObject.onclose = this.webSocketOnClose
			},
			webSocketOnOpen(e) {
				console.log('与服务端连接打开->', e)
				this.helper = helper.websiteUrl
				const username = helper.websiteUrl
				this.webSocketObject.send(JSON.stringify({
					message: "初始化",
					username,
					// you: "qdd"
				}))
			},
			webSocketOnMessage(e) {
				console.log('来自服务端的消息->', e)
			},
			webSocketOnError(e) {
				console.log('与服务端连接异常->', e)
			},
			webSocketOnClose(e) {
				console.log('与服务端连接关闭->', e)
			},
			handleSendButton(time) {

				console.log("userID:" + this.list[time].userID)
				this.you = this.list[time].userID
				this.id = time
				// this.list.length = 0
				// const username = this.username
				const message = this.sendMessage
				const you = this.you
				// const you = "qdd"
				console.log("you:" + you)
				this.webSocketObject.send(JSON.stringify({
					message,
					username: helper.websiteUrl,
					you,
				}))
				// this.sendMessage = ''
			},
			sessionSendButton() {
				// console.log("send:" + this.sendMessage)
				const you = this.you
				this.webSocketObject.send(JSON.stringify({
					message: this.sendMessage,
					username: helper.websiteUrl,
					you,
				}))
				this.sendMessage = ""

			},
			webSocketOnMessage(e) {

				const receiveMessage = JSON.parse(e.data);
				console.log('来自服务端的消息->', receiveMessage)
				if (receiveMessage["id"] == 0) {
					for (let i = 0; i < receiveMessage["friend"].length; i++) {
						this.list.push({
							// avatar: require('../../../image/' + receiveMessage[i].avatar),
							avatar: receiveMessage["friend"][i]["avatar"],
							lastmessage: receiveMessage["friend"][i]["lastmessage"],
							username: receiveMessage["friend"][i]["username"],
							userID: receiveMessage["friend"][i]["userID"]
						})
					}
				} else if (receiveMessage["id"] == 1) {
					this.history.length = 0
					this.avatar = receiveMessage["avatar"]
					this.toAvatar = receiveMessage["toAvatar"]
					for (let i = 0; i < receiveMessage["messages"].length; i++) {
						this.history.push({
							content: receiveMessage["messages"][i]["content"],
							receiverID: receiveMessage["messages"][i]["receiverID"],
							senderID: receiveMessage["messages"][i]["senderID"]
						})
					}

				} else {
					this.history.push({
						content: receiveMessage["message"],
						receiverID: receiveMessage["you"],
						senderID: receiveMessage["username"]
					})
					console.log(this.history)
				}
				this.scrollToBottom();
				// this.list.avater
				// this.messageList.push(receiveMessage)
				// console.log('来自服务端的消息->', receiveMessage)
			},
			scrollToBottom() {

				const container = document.getElementById('jlu');
				const scrollHeight = container.scrollHeight;
				console.log(scrollHeight)
				container.scrollTo(0, container.scrollHeight);
				// 获取滚动容器
				// const container = this.$refs.scrollContainer;
				// // 滚动到底部
				// container.scrollTop = container.scrollHeight;
			},
		},
		mounted() {
			nextTick(() => {
				this.scrollToBottom();
			})
			// this.scrollToBottom();
		},
		computed: {
			dynamicStyles() {
				return {
					backgroundColor: this.id ? 'red' : 'blue',
				};
			}
		},
		watch: {
			history: {
				immediate: true,
				handler(newVal) {
					// localStorage.setItem('todoList', JSON.stringify(newVal))
					// console.log(newVal)
					console.log("监听")
					this.$nextTick(function() {
						this.scrollToBottom()
					})

				},
				deep: true
			},
			'obj.name'(newVal) {
				console.log('监听对象的属性', newVal);
			}
		}
	}
</script>

<style scoped>
	.zbian {
		height: 100vh;
		width: 70px;
		background-color: #1196d9;
		float: left;
	}

	.zbian img {
		margin-left: 15px;
		margin-top: 20px;
		width: 40px;
		height: 40px;
	}

	.liebiao {
		height: 100vh;
		width: 200px;
		background-color: #ebebeb;
		float: left;
		border-right: 1px solid #9e9e9e;
	}


	.info {
		display: flex;
		height: 60px;
		justify-content: center;
		align-items: center;
		background-color: #ebebeb;
	}

	.info:hover {
		background-color: #bcbcbc;
		cursor: pointer;
	}

	.avatar {
		width: 64px;
	}

	.avatar img {
		width: 40px;
		height: 40px;
		margin-left: 10px;
	}

	.text {
		width: 0;
		flex: 1;
	}

	.desc {
		font-size: 10px;
		width: 100%;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		margin-top: 5px;
	}

	.name {
		/* line-height: 15px; */
		margin-top: -10px;
	}

	.ybiang {
		height: 100vh;

		/* float: left; */
		/* background-color: red; */
	}

	.ltkuan {
		height: 79vh;
		border-bottom: 1px solid #9e9e9e;
		/* background-color: red; */

	}

	.srkuan {
		height: 20vh;
		position: relative;

	}

	.yhm {
		height: 40px;
		width: 100%;
		background-color: #d5d5d5;
		line-height: 34px;
		font-size: 20px;
		/* background-color: red; */
	}

	.yhm p {
		margin: 0 0 0 0;
	}

	textarea {
		position: absolute;
		float: left;
		width: calc(100vw - 275px);
		height: 15vh;
		padding: 0px;
		resize: none;
		border: none;
		outline: none;
	}

	button {
		height: 30px;
		width: 100px;
		float: right;
		margin-right: 20px;
		/* margin-top: 20px; */
		margin-top: 16vh;
		background-color: rgba(255, 255, 255, 0);
		border: 1px solid #dddddd;
		color: #05a451;
	}

	button:hover {
		cursor: pointer
	}

	.jlu {
		/* width: 90vw; */
		height: 70vh;
		overflow-y: auto;
		/* scroll-behavior: auto; */
		position: relative;
	}

	.bottom-marker {
		height: 1px;
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
	}

	.dmian {
		margin-left: 20px;
		/* width: 600px; */
		margin-top: 20px;
		/* background-color: #fff; */
	}

	.wd {
		float: right;
		width: calc(100vw - 300px);
		margin-top: 20px;
	}

	.dmian>div {
		float: left;
		/* width: 800px; */
		/* margin-top: -15px; */
		margin-left: 10px;
		margin-bottom: 10px;
		color: #bcbcbc;
	}

	.wd>div {
		margin-top: 10px;
		margin-right: 10px;
		float: right;

	}

	.dmian p,
	.wd p {

		word-wrap: break-word;
		margin: 0 10px 0 10px;
	}

	/* .wdmz {
		float: right;
	} */

	.dmian img,
	.wd img {
		width: 40px;
		height: 40px;
	}

	.dmian img {
		float: left;

	}

	.wd img {
		float: right;
	}

	.nr {
		/* width: 300px; */
		margin-left: 0px;
		color: black;
		/* background-color: #fff; */
		border-radius: 10px 10px 10px 10px;
	}

	.wd .nr {
		background-color: #89d961;
	}

	.dmian .nr {
		background-color: #fff;
		margin-left: 10px;
	}

	.dmian div {
		float: left;
	}

	.xni {
		float: right;
		width: 600px;
	}

	.wd div {
		float: right;
	}

	.guabian {
		background-color: #bcbcbc;
	}

	.ychang {
		width: calc(100vw - 330px);
		height: 1px;
	}
</style>